<script lang="ts">
    let searchQuery = "";

    const images = [
        { id: 1, title: "RecCloud-20230307-160200", type: "zh", src: "/path/to/image1.jpg" },
        { id: 2, title: "圣诞氛围", type: "en", src: "/path/to/image2.jpg" },
        { id: 3, title: "IMG_9104", type: "en", src: "/path/to/image3.jpg" },
        { id: 4, title: "IMG_9183", type: "zh", src: "/path/to/image4.jpg" },
        { id: 5, title: "在家不完全指南", type: "zh", src: "/path/to/image5.jpg" },
        { id: 6, title: "毛巾", type: "zh", src: "/path/to/image6.jpg" },
        { id: 7, title: "火箭", type: "zh", src: "/path/to/image7.jpg" },
        { id: 8, title: "卡西", type: "zh", src: "/path/to/image8.jpg" }
    ];

    $: filteredImages = images.filter(image =>
        image.title.toLowerCase().includes(searchQuery.toLowerCase())
    );
</script>

<div class="container mx-auto px-4 py-8">
    <div class="mb-6">
        <div class="flex items-center bg-white rounded-lg shadow-sm">
            <button class="p-2 hover:bg-gray-100 rounded-l-lg">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                </svg>
            </button>
            <input
                type="text"
                bind:value={searchQuery}
                placeholder="请输入关键词搜索"
                class="w-full p-2 outline-none"
            />
            <button class="px-4 py-2 text-green-500 hover:bg-gray-100 rounded-r-lg">创建</button>
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {#each filteredImages as image (image.id)}
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <div class="relative aspect-w-16 aspect-h-9">
                    <img
                        src={image.src}
                        alt={image.title}
                        class="w-full h-full object-cover"
                    />
                </div>
                <div class="p-4">
                    <h3 class="text-lg font-medium text-gray-900 truncate">{image.title}</h3>
                    <p class="text-sm text-gray-500">{image.type}</p>
                </div>
            </div>
        {/each}
    </div>
</div>

<style>
    .aspect-w-16 {
        position: relative;
        padding-bottom: 56.25%;
    }

    .aspect-w-16 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>